<template>
    <div>
        <Modal :mask-closable="false" v-model="modalState" fullscreen title="文件预览" @on-cancel="cancel" class="modal-content-layout">
            <div v-if="isStudy" class="studyTime">学习时长：{{ time }}</div>
            <iframe id="iframe" height="100%" width="100%" :src="iframeModalSrc" frameborder="0"></iframe>
            <div slot="footer">
                <Button v-if="!isStudy" type="primary" @click="cancel">关闭</Button>
                <Button v-if="isStudy" @click="cancel">{{$t('common.Cancle')}}</Button>
                <Button v-if="isStudy" type="primary" @click="finish">完成</Button>
            </div>
            <Spin size="large" fix v-show="spinShow">
                <Icon type="ios-loading" size=18 class="demo-spin-icon-load"></Icon>
                <div>文件加载中</div>
            </Spin>
        </Modal>
    </div>

</template>

<script>
// import {Modal} from 'iview';
import moment from 'moment';

export default {
    name: 'iframeModalCompent',
    components: {
        // Modal,
    },
    props: ['iframeShow', 'iframeModalSrc', 'isStudy'],
    data() {
        return {
            modalState: this.iframeShow,
            // iframeModalSrc: ''
            learningStartTime: '',
            time: '00:00:00',
            time1: null,
            spinShow: true
        }
    },

    mounted() {
        let $this = this;
        document.oncontextmenu = function () {
            return false;
        };
        var iframe = document.getElementById('iframe');
        iframe.onload = function () {
            iframe.contentWindow.document.oncontextmenu = function () {
                return false;
            };
            iframe.contentWindow.document.onselectstart = function () {
                return false;
            };

            $this.spinShow = false;
        };
        if (this.isStudy) {
            this.learningStartTime = moment()
            this.time1 = setInterval(() => {
                const lastTime = moment()
                const duration = moment.duration(lastTime.diff(this.learningStartTime));
                const {_data} = duration
                const hour = _data.hours
                const minute = _data.minutes
                const second = _data.seconds
                this.time = `${hour < 10 ? '0' + hour : hour}:${minute < 10 ? '0' + minute : minute}:${second < 10 ? '0' + second : second}`
            }, 1000)
        }
    },
    destroyed() {
        document.oncontextmenu = function () {
            return true;
        };
        this.time1 = null
    },
    methods: {
        // show(url) {
        //     this.modalState = true
        //     this.iframeModalSrc = url
        // },
        cancel() {
            this.modalState = false
            this.$emit('closeIframe')
        },
        // 完成
        finish() {
            this.axios({
                method: "post",
                url: "/dms/operationRecord/add",
                data: {
                    documentAttachmentId: this.isStudy,
                    operationType: 3,
                    operationTime: moment(this.learningStartTime).format('YYYY-MM-DD HH:mm:ss'),
                    learningStartTime: moment(this.learningStartTime).format('YYYY-MM-DD HH:mm:ss'),
                    learningEndTime: moment().format('YYYY-MM-DD HH:mm:ss'),
                }
            }).then(res => {
                if (res.code === 200) {
                    this.$emit('closeStudyIframe')
                } else {
                    this.$Message.warning(({content: res.msg, duration: 6, closable: true}));
                }
            });
        }
    },

}
</script>

<style scoped lang="scss">
.studyTime {
    font-size: 18px;
    font-weight: bolder;
    margin-bottom: 15px;
}

.ivu-spin-fix{
    background: #f5f8fa
}
</style>
<style lang="scss">

</style>
